import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Upload, Icon, message,Modal } from 'antd';
import {observer} from 'mobx-react';
import './styles.less';
import host from '../../conf/hostConf';
import model from './model';
const Dragger = Upload.Dragger;
@observer
class Index extends Component {
  static propTypes = {
    name:PropTypes.string,
    data:PropTypes.instanceOf(Object),
    url:PropTypes.string,
    beforeUpload:PropTypes.func,
    onChange:PropTypes.func,
    onPreview:PropTypes.func,
    onRemove:PropTypes.func,
    title:PropTypes.string,
    hidden:PropTypes.func,
    visible:PropTypes.bool
  }

  render() {
    const _self = this;
    const props = {
        name: _self.props.name||'file',  //文件参数名
        multiple: true,
        directory:false, //支持上传文件夹
        data:_self.props.data||{}, //上传参数
        withCredentials:true, //允许携带cookie
        action: `${host}${_self.props.url}`,
        beforeUpload(file, fileList){
            //上传前对文件进行检查 返回false阻止继续上传
            if (_self.props.beforeUpload) return _self.props.beforeUpload(file, fileList);
        },
        onChange(info) {
            //上传后的回调
           if (_self.props.onChange) return _self.props.onChange(info);
        }
      };
      if (_self.props.fileList) {
        props.fileList = _self.props.fileList;
        props.onPreview = (file) =>{
          //点击文件链接或预览图标时的回调
          if (_self.props.onPreview) _self.props.onPreview(file);
        }
        props.onRemove = (file) => {
          //点击移除文件时的回调，返回值为 false 时不移除 支持返回promise对象
          if (_self.props.onRemove) _self.props.onRemove(file);
      }
      }
    return (
      <div onMouseMove={(e)=>{
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
      }}>
        <Modal
          title={this.props.title||"上传"}
          visible={this.props.visible||false}
          footer={null}
          onCancel={()=>{
            if (this.props.hidden) this.props.hidden();
          }}
        >
        <Dragger {...props}>
            <p className="ant-upload-drag-icon">
            <Icon type="inbox" />
            </p>
            <p className="ant-upload-text">Click or drag file to this area to upload</p>
            <p className="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
        </Dragger>
      </Modal>
      </div>
    );
  }
}

export default Index;
